<template>
  <ych-modal
    :fullscreen="true"
    :title="title"
    :visible="visible"
    :bodyStyle="bodyStyle"
    :confirmLoading="spinning > 0"
    @ok="handleOk"
    @cancel="handleCancel"
    :cancelText="$t('m.common.button.close')">
    <a-spin :spinning="spinning > 0">

      <!-- 子表单区域 -->
      <a-tabs v-model="activeKey">
        <a-tab-pane :tab="$t('m.eform.appview.other.basic_info')" :key="defaultTabKey" :forceRender="true">
          <!-- 主表单区域 -->
          <a-form :form="form">
            <a-row>
              <a-col :span="8">
                <a-form-item :label="$t('m.eform.appview.entity.viewName')" :labelCol="colLayout3.labelCol" :wrapperCol="colLayout3.wrapperCol">
<!--                  <a-input v-decorator="[ 'viewName', validatorRules.viewName]" placeholder=""></a-input>-->
                  <locale-tag v-decorator="[ 'viewName', validatorRules.viewName]" :group-id="groupId"></locale-tag>
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item :label="$t('m.eform.appview.entity.viewCode')" :labelCol="colLayout3.labelCol" :wrapperCol="colLayout3.wrapperCol">
                  <a-input v-decorator="[ 'viewCode', validatorRules.viewCode]" placeholder=""></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item :label="$t('m.eform.apptable.entity.dsName')" :labelCol="colLayout3.labelCol"
                             :wrapperCol="colLayout3.wrapperCol">
                  <select-ds v-decorator="[ 'dsCode', validatorRules.dsCode]" placeholder=""
                             :allow-clear="false"></select-ds>
                </a-form-item>
              </a-col>
              <a-col :span="4">
                <a-form-item :label="$t('m.common.label.sort')" :labelCol="labelCol2" :wrapperCol="wrapperCol2">
                  <a-input-number v-decorator="[ 'orderNum', validatorRules.orderNum]"></a-input-number>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="24">
                <a-form-item :label="$t('m.common.label.custom_SQL')" :labelCol="colLayout3.fixed.labelCol"
                             :wrapperCol="colLayout3.fixed.wrapperCol">
                  <ych-code-editor
                    v-decorator="['viewSql', validatorRules.viewSql]"
                    language="sql"
                    :fullScreen="true"
                    :placeholder="$t('m.common.tip.sql_warn')"
                    style="min-height: 50px"/>
                  <a-button-group>
                    <a-button @click="selectTable">{{ $t('m.common.button.selectEntityTable') }}</a-button>
                    <a-button @click="selectDbTable">{{ $t('m.common.button.selectDbTable') }}</a-button>
                    <a-button @click="parseSql" type="primary">{{ $t('m.common.button.parseSql') }}</a-button>
                    <a-tooltip style="padding-left: 10px;"
                               :title="$t('m.eform.appview.other.parse_sql_help')">
                      <ych-icon type="question-circle"></ych-icon>
                    </a-tooltip>
                  </a-button-group>
                  <span style="padding-left: 20px;">{{$t('m.eform.appview.other.parse_sql_tip')}}<a-input v-model="model.tableName"
                                                                        style="width: 250px; margin-left: 5px; height: 20px;"/></span>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <a-form-item :label="$t('m.eform.appview.entity.sqlOrder')" :labelCol="colLayout2.labelCol"
                             :wrapperCol="colLayout2.wrapperCol">
                  <a-input v-decorator="[ 'viewOrder', validatorRules.viewOrder]"
                           :placeholder="$t('m.eform.appview.other.sqlOrder_tip')"></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item :label="$t('m.eform.appview.entity.dialogTitle')" :labelCol="colLayout2.labelCol"
                             :wrapperCol="colLayout2.wrapperCol">
                  <a-input v-decorator="[ 'dialogTitle', validatorRules.dialogTitle]"
                           :placeholder="$t('m.eform.appview.other.dialogTitle_tip')"></a-input>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="6">
                <a-form-item :label="$t('m.eform.appview.entity.defaultQuery')" :labelCol="colLayout4.labelCol" :wrapperCol="colLayout4.wrapperCol">
                  <a-radio-group name="isQuery" v-decorator="['isQuery', validatorRules.isQuery]">
                    <a-radio :value="item.value" v-for="item in yesNo_text" :key="item.value">{{ item.text }}
                    </a-radio>
                  </a-radio-group>
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item :label="$t('m.eform.appview.entity.checkType')" :labelCol="colLayout4.labelCol" :wrapperCol="colLayout4.wrapperCol">
                  <a-radio-group name="checkType" v-decorator="['checkType', validatorRules.checkType]">
                    <a-radio :value="item.value" v-for="item in yesNo_text" :key="item.value">{{ item.text }}
                    </a-radio>
                  </a-radio-group>
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item :label="$t('m.eform.appview.entity.isLineNum')" :labelCol="colLayout4.labelCol" :wrapperCol="colLayout4.wrapperCol">
                  <a-radio-group name="isLineNum" v-decorator="['isLineNum', validatorRules.isLineNum]">
                    <a-radio :value="item.value" v-for="item in yesNo_text" :key="item.value">{{ item.text }}
                    </a-radio>
                  </a-radio-group>
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item :label="$t('m.eform.appview.entity.actionWidth')" :labelCol="colLayout4.labelCol" :wrapperCol="colLayout4.wrapperCol">
                  <a-input-number v-decorator="[ 'actionWidth', validatorRules.actionWidth]" placeholder="">
                  </a-input-number>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="6">
                <a-form-item :label="$t('m.eform.appview.entity.isPage')" :labelCol="colLayout4.labelCol" :wrapperCol="colLayout4.wrapperCol">
                  <a-radio-group name="isPage" v-decorator="['isPage', validatorRules.isPage]" @change="changeIsPage">
                    <a-radio :value="item.value" v-for="item in yesNo_text" :key="item.value">{{ item.text }}
                    </a-radio>
                  </a-radio-group>
                </a-form-item>
              </a-col>
              <a-col v-show="isPage" :span="6">
                <a-form-item :label="$t('m.eform.appview.entity.pageNum')" :labelCol="colLayout4.labelCol" :wrapperCol="colLayout4.wrapperCol">
                  <a-select v-decorator="[ 'pageNum', validatorRules.pageNum]" placeholder=""
                            :options="pageNumOptions">
                  </a-select>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="6">
                <a-form-item :label="$t('m.eform.appview.entity.scrollEnable')" :labelCol="colLayout4.labelCol" :wrapperCol="colLayout4.wrapperCol">
                  <a-radio-group name="scrollEnable" v-decorator="['scrollEnable', validatorRules.scrollEnable]"
                                 @change="changeIsScroll">
                    <a-radio :value="item.value" v-for="item in yesNo_text" :key="item.value">{{ item.text }}
                    </a-radio>
                  </a-radio-group>
                </a-form-item>
              </a-col>
              <a-col v-show="isScroll" :span="6">
                <a-form-item :label="$t('m.eform.appview.entity.scrollWidth')" :labelCol="colLayout4.labelCol" :wrapperCol="colLayout4.wrapperCol">
                  <a-input-number v-decorator="[ 'scrollWidth', validatorRules.scrollWidth]" placeholder="">
                  </a-input-number>
                </a-form-item>
              </a-col>
              <a-col v-show="isScroll" :span="6">
                <a-form-item :label="$t('m.eform.appview.entity.fixedAction')" :labelCol="colLayout4.labelCol" :wrapperCol="colLayout4.wrapperCol">
                  <a-radio-group name="fixedAction" v-decorator="['fixedAction', validatorRules.fixedAction]">
                    <a-radio :value="item.value" v-for="item in yesNo_text" :key="item.value">{{ item.text }}
                    </a-radio>
                  </a-radio-group>
                </a-form-item>
              </a-col>
              <a-col v-show="isScroll" :span="6">
                <a-form-item :label="$t('m.eform.appview.entity.fixedBpmColumn')" :labelCol="colLayout4.labelCol" :wrapperCol="colLayout4.wrapperCol">
                  <a-radio-group name="fixedBpmColumn" v-decorator="['fixedBpmColumn', validatorRules.fixedBpmColumn]">
                    <a-radio :value="item.value" v-for="item in yesNo_text" :key="item.value">{{ item.text }}
                    </a-radio>
                  </a-radio-group>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="6">
                <a-form-item :label="$t('m.eform.appview.entity.isFlow')" :labelCol="colLayout4.labelCol" :wrapperCol="colLayout4.wrapperCol">
                  <a-radio-group name="isFlow" v-decorator="['isFlow', validatorRules.isFlow]" @change="changeIsFlow">
                    <a-radio :value="item.value" v-for="item in yesNo_text" :key="item.value">{{ item.text }}
                    </a-radio>
                  </a-radio-group>
                </a-form-item>
              </a-col>
              <a-col v-show="isFlow" :span="6">
                <a-form-item :label="$t('m.eform.appview.entity.flowScope')" :labelCol="colLayout4.labelCol" :wrapperCol="colLayout4.wrapperCol">
                  <a-select v-decorator="['flowScope', validatorRules.flowScope]" placeholder="">
                    <a-select-option v-for="item in flowScope" :key="item.value" :value="item.value">
                      {{ item.text }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </a-col>
              <a-col v-show="isFlow" :span="6">
                <a-form-item :label="$t('m.eform.appview.entity.disableBpmStatus')" :labelCol="colLayout4.labelCol" :wrapperCol="colLayout4.wrapperCol">
                  <a-radio-group name="disableBpmStatus" v-decorator="['disableBpmStatus', validatorRules.disableBpmStatus]">
                    <a-radio :value="item.value" v-for="item in yesNo_text" :key="item.value">{{ item.text }}
                    </a-radio>
                  </a-radio-group>
                </a-form-item>
              </a-col>
              <a-col v-show="isFlow" :span="6">
                <a-form-item :label="$t('m.eform.appview.entity.disableBpmActivity')" :labelCol="colLayout4.labelCol" :wrapperCol="colLayout4.wrapperCol">
                  <a-radio-group name="disableBpmActivity" v-decorator="['disableBpmActivity', validatorRules.disableBpmActivity]">
                    <a-radio :value="item.value" v-for="item in yesNo_text" :key="item.value">{{ item.text }}
                    </a-radio>
                  </a-radio-group>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="6">
                <a-form-item :label="$t('m.eform.appview.entity.beforeScript')" :labelCol="colLayout4.labelCol" :wrapperCol="colLayout4.wrapperCol">
                  <script-button v-decorator="['beforeScript', validatorRules.beforeScript]" :label="$t('m.common.button.config')" help-code="beforeListQueryForJs"></script-button>
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item :label="$t('m.eform.appview.entity.afterScript')" :labelCol="colLayout4.labelCol" :wrapperCol="colLayout4.wrapperCol">
                  <script-button v-decorator="['afterScript', validatorRules.afterScript]" :label="$t('m.common.button.config')" help-code="afterListQueryForJs"></script-button>
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item :label="$t('m.eform.appview.entity.beforeGroovy')" :labelCol="colLayout4.labelCol" :wrapperCol="colLayout4.wrapperCol">
                  <script-button v-decorator="['beforeGroovy', validatorRules.beforeGroovy]" :label="$t('m.common.button.config')" help-code="beforeListQueryForGroovy" :groovy="true"></script-button>
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item :label="$t('m.eform.appview.entity.afterGroovy')" :labelCol="colLayout4.labelCol" :wrapperCol="colLayout4.wrapperCol">
                  <script-button v-decorator="['afterGroovy', validatorRules.afterGroovy]" :label="$t('m.common.button.config')" help-code="afterListQueryForGroovy" :groovy="true"></script-button>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12">
                <a-form-item :label="$t('m.eform.appview.entity.beforeJava')" :labelCol="colLayout2.labelCol" :wrapperCol="colLayout2.wrapperCol">
                  <a-input v-decorator="['beforeJava', validatorRules.beforeJava]" :placeholder="$t('m.eform.appview.other.java_event_tip')"></a-input>
                </a-form-item>
              </a-col>
              <a-col :span="12">
                <a-form-item :label="$t('m.eform.appview.entity.afterJava')" :labelCol="colLayout2.labelCol" :wrapperCol="colLayout2.wrapperCol">
                  <a-input v-decorator="['afterJava', validatorRules.afterJava]" :placeholder="$t('m.eform.appview.other.java_event_tip')"></a-input>
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="6">
                <a-form-item :label="$t('m.eform.appview.entity.customRowFunc')" :labelCol="colLayout4.labelCol" :wrapperCol="colLayout4.wrapperCol">
                  <script-button v-decorator="['customRowFunc', validatorRules.customRowFunc]" :label="$t('m.common.button.config')" help-code="customListRowStyleForJs"></script-button>
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item :label="$t('m.eform.appview.entity.exportGlobalStyle')" :labelCol="colLayout4.labelCol" :wrapperCol="colLayout4.wrapperCol">
                  <a-badge :dot="!!model.exportGlobalStyle">
                    <a-button icon="code" type="link" @click="exportGlobalStyleButton">{{$t('m.common.button.config')}}</a-button>
                  </a-badge>
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item :label="$t('m.eform.appview.entity.customSlot')" :labelCol="colLayout4.labelCol" :wrapperCol="colLayout4.wrapperCol">
                  <custom-slot-dialog v-decorator="['customSlot', validatorRules.customSlot]"/>
                </a-form-item>
              </a-col>
              <a-col :span="6">
                <a-form-item :label="$t('m.eform.appview.entity.customDataConfigSql')" :labelCol="colLayout4.labelCol" :wrapperCol="colLayout4.wrapperCol">
                  <script-button v-decorator="['customDataConfigSql', validatorRules.customDataConfigSql]" :label="$t('m.common.button.config')" language="sql" :placeholder="$t('m.eform.appview.entity.customDataConfigSql_placeholder')" help-code="none"></script-button>
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </a-tab-pane>
        <a-tab-pane :tab="$t('m.eform.appview.other.table_config')" :key="refKeys[0]" :forceRender="true">

          <vxe-toolbar>
            <template #buttons>
              <a-button type="primary" icon="plus"
                        @click="insertRow('colTable', actAppViewColTable.dataSource, actAppViewColTable.initData, 'colCode')">
                {{ $t('m.common.button.add') }}
              </a-button>
              <span class="action-button-gap"></span>
              <a-button type="default" icon="minus" @click="deleteRow('colTable', actAppViewColTable.dataSource)">{{ $t('m.common.button.delete') }}
              </a-button>
            </template>
          </vxe-toolbar>

          <vxe-table
            header-align="center"
            border
            :scroll-y="{enabled: false}"
            ref="colTable"
            class="sortable-row-vxe"
            show-header-overflow
            show-overflow
            :height="height"
            :edit-rules="actAppViewColTable.validRules"
            :row-config="{isHover: true, useKey: true, keyField: 'id'}"
            :edit-config="{trigger: 'click', mode: 'cell', activeMethod: activeRowMethodCol}"
            :data="actAppViewColTable.dataSource">
            <vxe-column width="60" align="center">
              <template #default>
                <span class="drag-btn">
                  <i class="vxe-icon-num-list"></i>
                </span>
              </template>
            </vxe-column>
            <vxe-column type="checkbox" width="50" align="center"></vxe-column>
            <vxe-column type="seq" :title="$t('m.common.label.number')" width="50" align="center"></vxe-column>
            <vxe-column field="colCode" :title="$t('m.eform.appview.entity.colCode')" :edit-render="{name: 'input'}" :min-width="150"></vxe-column>
            <vxe-column field="colName" :title="$t('m.eform.appview.entity.colName')" :edit-render="{autofocus: '.vxe-input--inner'}" :min-width="170">
              <template #default="{ row }">
                <locale-tag v-model="row.colName" :group-id="groupId" :current-table="model.tableName" :edit="false"/>
              </template>
              <template #edit="{ row }">
                <locale-tag v-model="row.colName" :group-id="groupId" :current-table="model.tableName" :is-vxe="true"/>
              </template>
            </vxe-column>
            <vxe-column field="colAlias" :title="$t('m.eform.appview.entity.colAlias')" :edit-render="{autofocus: '.vxe-input--inner'}" :min-width="150">
              <template #default="{ row }">
                <locale-tag v-model="row.colAlias" :group-id="groupId" :current-table="model.tableName" :edit="false"/>
              </template>
              <template #edit="{ row }">
                <locale-tag v-model="row.colAlias" :group-id="groupId" :current-table="model.tableName" :is-vxe="true"/>
              </template>
            </vxe-column>
            <vxe-column field="mergeHeaderName" :title="$t('m.eform.appview.entity.mergeHeaderName')" :edit-render="{autofocus: '.vxe-input--inner'}" :min-width="150">
              <template #default="{ row }">
                <locale-tag v-model="row.mergeHeaderName" :group-id="groupId" :current-table="model.tableName" :edit="false"/>
              </template>
              <template #edit="{ row }">
                <locale-tag v-model="row.mergeHeaderName" :group-id="groupId" :current-table="model.tableName" :is-vxe="true"/>
              </template>
            </vxe-column>
            <vxe-column field="colType" :title="$t('m.eform.appview.entity.colType')" :edit-render="{name: 'select', options: colType}"
                        :min-width="120" align="center"></vxe-column>
            <vxe-column field="alignType" :title="$t('m.eform.appview.entity.alignType')" :edit-render="{name: 'select', options: alignType}"
                        :min-width="110" align="center"></vxe-column>
            <vxe-column field="colWidth" :title="$t('m.eform.appview.entity.colWidth')"
                        :edit-render="{name: 'input', attrs: {type: 'number'}}" :min-width="100"
                        align="center"></vxe-column>
            <vxe-column field="isHidden" :title="$t('m.eform.appview.entity.isHidden')" :edit-render="{}" :min-width="120" align="center">
              <template #default="{ row }">
                <vxe-checkbox v-model="row.isHidden" checked-value="N" unchecked-value="Y"></vxe-checkbox>
              </template>
              <template #edit="{ row }">
                <vxe-checkbox v-model="row.isHidden" checked-value="N" unchecked-value="Y"></vxe-checkbox>
              </template>
            </vxe-column>
            <vxe-column field="fixed" :title="$t('m.eform.appview.entity.fixed')" :edit-render="{name: 'select', options: fixed}"
                        :min-width="100" align="center"></vxe-column>
            <vxe-column field="isEllipsis" :title="$t('m.eform.appview.entity.isEllipsis')" :edit-render="{}" :min-width="110" align="center">
              <template #default="{ row }">
                <vxe-checkbox v-model="row.isEllipsis" checked-value="Y" unchecked-value="N"
                              @change="changeIsEllipsis(row, $event)"></vxe-checkbox>
              </template>
              <template #edit="{ row }">
                <vxe-checkbox v-model="row.isEllipsis" checked-value="Y" unchecked-value="N"
                              @change="changeIsEllipsis(row, $event)"></vxe-checkbox>
              </template>
            </vxe-column>
            <vxe-column field="tuoMin" :title="$t('m.eform.appview.entity.tuoMin')" :edit-render="{name: 'select', options: tuoMin}"
                        :min-width="120" align="center"></vxe-column>
            <vxe-column field="dataConfig" :title="$t('m.eform.apptable.entity.dataConfig')"
                        :edit-render="{name: 'input'}" :min-width="150"
                        align="center">
              <template #default="{ row }">
                <a-badge :dot="!!row.dataConfig">
                  <a-button type="link" size="small" @click="dataConfigButton(row)">{{
                      $t('m.common.button.config')
                    }}
                  </a-button>
                </a-badge>
              </template>
              <template #edit="{ row }">
                <a-badge :dot="!!row.dataConfig">
                  <a-button type="link" size="small" @click="dataConfigButton(row)">{{
                      $t('m.common.button.config')
                    }}
                  </a-button>
                </a-badge>
              </template>
            </vxe-column>
            <vxe-column field="actionConfig" :title="$t('m.eform.appview.entity.actionConfig')" :edit-render="{}" :min-width="110" align="center">
              <template #default="{ row }">
                <a-badge :dot="!!row.actionConfig">
                  <a-button type="link" size="small" @click="actionConfigButton(row)">{{
                      $t('m.common.button.config')
                    }}
                  </a-button>
                </a-badge>
              </template>
              <template #edit="{ row }">
                <a-badge :dot="!!row.actionConfig">
                  <a-button type="link" size="small" @click="actionConfigButton(row)">{{
                      $t('m.common.button.config')
                    }}
                  </a-button>
                </a-badge>
              </template>
            </vxe-column>
            <vxe-column field="isImport" :title="$t('m.eform.appview.entity.isImport')" :edit-render="{}" :min-width="100" align="center">
              <template #default="{ row }">
                <vxe-checkbox v-model="row.isImport" checked-value="Y" unchecked-value="N"></vxe-checkbox>
              </template>
              <template #edit="{ row }">
                <vxe-checkbox v-model="row.isImport" checked-value="Y" unchecked-value="N"></vxe-checkbox>
              </template>
            </vxe-column>
            <vxe-column field="importRules" :title="$t('m.eform.appview.entity.importRules')" :edit-render="{}" :min-width="150" align="center">
              <template #default="{ row }">
                <a-badge :dot="!!row.importRules">
                  <a-button type="link" size="small" @click="importRulesButton(row)">{{
                      $t('m.common.button.config')
                    }}
                  </a-button>
                </a-badge>
              </template>
              <template #edit="{ row }">
                <a-badge :dot="!!row.importRules">
                  <a-button type="link" size="small" @click="importRulesButton(row)">{{
                      $t('m.common.button.config')
                    }}
                  </a-button>
                </a-badge>
              </template>
            </vxe-column>
            <vxe-column field="isExport" :title="$t('m.eform.appview.entity.isExport')" :edit-render="{}" :min-width="100" align="center">
              <template #default="{ row }">
                <vxe-checkbox v-model="row.isExport" checked-value="Y" unchecked-value="N"></vxe-checkbox>
              </template>
              <template #edit="{ row }">
                <vxe-checkbox v-model="row.isExport" checked-value="Y" unchecked-value="N"></vxe-checkbox>
              </template>
            </vxe-column>
            <vxe-column field="exportStyle" :title="$t('m.eform.appview.entity.exportStyle')" :edit-render="{}" :min-width="150" align="center">
              <template #default="{ row }">
                <a-badge :dot="!!row.exportStyle">
                  <a-button type="link" size="small" @click="exportColumnStyleButton(row)">{{
                    $t('m.common.button.config')
                    }}
                  </a-button>
                </a-badge>
              </template>
              <template #edit="{ row }">
                <a-badge :dot="!!row.exportStyle">
                  <a-button type="link" size="small" @click="exportColumnStyleButton(row)">{{
                    $t('m.common.button.config')
                    }}
                  </a-button>
                </a-badge>
              </template>
            </vxe-column>
            <vxe-column field="isSort" :title="$t('m.eform.appview.entity.isSort')" :edit-render="{}" :min-width="100" align="center">
              <template #default="{ row }">
                <vxe-checkbox v-model="row.isSort" checked-value="Y" unchecked-value="N"></vxe-checkbox>
              </template>
              <template #edit="{ row }">
                <vxe-checkbox v-model="row.isSort" checked-value="Y" unchecked-value="N"></vxe-checkbox>
              </template>
            </vxe-column>
          </vxe-table>

        </a-tab-pane>
        <a-tab-pane :tab="$t('m.eform.appview.other.query_config')" :key="refKeys[1]" :forceRender="true">

          <vxe-table
            header-align="center"
            border
            ref="queryTable"
            show-header-overflow
            show-overflow
            :height="height2"
            :row-config="{isHover: true, keyField: 'id'}"
            :edit-config="{trigger: 'click', mode: 'cell', activeMethod: activeRowMethodCol}"
            :data="actAppViewColTable.dataSource">
            <vxe-column type="seq" :title="$t('m.common.label.number')" width="50" align="center"></vxe-column>
            <vxe-column field="colName" :title="$t('m.eform.appview.entity.colName')" :min-width="150">
              <template #default="{ row }">
                <locale-tag v-model="row.colName" :group-id="groupId" :current-table="model.tableName" :edit="false"/>
              </template>
            </vxe-column>
            <vxe-column field="queryAlias" :title="$t('m.eform.appview.entity.queryAlias')" :edit-render="{autofocus: '.vxe-input--inner'}" :min-width="150">
              <template #default="{ row }">
                <locale-tag v-model="row.queryAlias" :group-id="groupId" :current-table="model.tableName" :edit="false"/>
              </template>
              <template #edit="{ row }">
                <locale-tag v-model="row.queryAlias" :group-id="groupId" :current-table="model.tableName" :is-vxe="true"/>
              </template>
            </vxe-column>
            <vxe-column field="isQuery" :title="$t('m.eform.appview.entity.isQuery')" :edit-render="{}" :min-width="120" align="center">
              <template #default="{ row }">
                <vxe-checkbox v-model="row.isQuery" checked-value="Y" unchecked-value="N"></vxe-checkbox>
              </template>
              <template #edit="{ row }">
                <vxe-checkbox v-model="row.isQuery" checked-value="Y" unchecked-value="N"></vxe-checkbox>
              </template>
            </vxe-column>
            <vxe-column field="queryOp" :title="$t('m.eform.appview.entity.queryOp')"
                        :edit-render="{name: 'select', options: queryOp, events: {change: changeQueryOp}}"
                        :min-width="120" align="center"></vxe-column>
            <vxe-column field="queryDefaultValue" :title="$t('m.eform.appview.entity.queryDefaultValue')" :edit-render="{name: 'input'}"
                        :title-help="{content: this.$t('m.eform.appview.other.queryDefaultValue_help')}"
                        :min-width="130"></vxe-column>
            <vxe-column field="showType" :title="$t('m.eform.apptable.entity.showType')"
                        :edit-render="{name: 'select', options: showType}"
                        :min-width="120" align="center"></vxe-column>
            <vxe-column field="queryFormat" :title="$t('m.eform.apptable.entity.showConfig')" :edit-render="{}"
                        :min-width="130" align="center">
              <template #default="{ row }">
                <a-badge
                  :dot="!!row.queryFormat && noShowConfig.indexOf(row.showType) === -1">
                  <a-button
                    :disabled="noShowConfig.indexOf(row.showType) !== -1"
                    type="link" size="small" @click="queryFormatButton(row)">{{ $t('m.common.button.config') }}
                  </a-button>
                </a-badge>
              </template>
              <template #edit="{ row }">
                <a-badge
                  :dot="!!row.queryFormat && noShowConfig.indexOf(row.showType) === -1">
                  <a-button
                    :disabled="noShowConfig.indexOf(row.showType) !== -1"
                    type="link" size="small" @click="queryFormatButton(row)">{{ $t('m.common.button.config') }}
                  </a-button>
                </a-badge>
              </template>
            </vxe-column>
            <vxe-column field="queryIsHidden" :title="$t('m.eform.appview.entity.queryIsHidden')" :edit-render="{}" :min-width="110" align="center">
              <template #default="{ row }">
                <vxe-checkbox v-model="row.queryIsHidden" checked-value="N" unchecked-value="Y"></vxe-checkbox>
              </template>
              <template #edit="{ row }">
                <vxe-checkbox v-model="row.queryIsHidden" checked-value="N" unchecked-value="Y"></vxe-checkbox>
              </template>
            </vxe-column>
            <vxe-column field="queryOrder" :title="$t('m.eform.appview.entity.queryOrder')"
                        :edit-render="{name: 'input', attrs: {type: 'number'}}" :min-width="110"
                        align="center"></vxe-column>
            <vxe-column field="queryCustomSql" :title="$t('m.common.label.custom_SQL')" :edit-render="{name: 'input'}"
                        :min-width="120"></vxe-column>
          </vxe-table>

        </a-tab-pane>
        <a-tab-pane :tab="$t('m.eform.appview.other.button_config')"  :key="refKeys[2]" :forceRender="true">

          <vxe-toolbar>
            <template #buttons>
              <a-button type="primary" icon="plus"
                        @click="insertRow('buttonTable', actAppViewButtonTable.dataSource, actAppViewButtonTable.initData, 'openType')">
                {{ $t('m.common.button.add') }}
              </a-button>
              <span class="action-button-gap"></span>
              <a-button type="default" icon="minus" @click="deleteRow('buttonTable', actAppViewButtonTable.dataSource)">
                {{ $t('m.common.button.delete') }}
              </a-button>
            </template>
          </vxe-toolbar>

          <vxe-table
            header-align="center"
            keep-source
            border
            :scroll-y="{enabled: false}"
            ref="buttonTable"
            class="sortable-row-vxe"
            show-header-overflow
            show-overflow
            :height="height"
            :edit-rules="actAppViewButtonTable.validRules"
            :row-config="{isHover: true, useKey: true, keyField: 'id'}"
            :edit-config="{trigger: 'click', mode: 'cell', activeMethod: activeRowMethodButton}"
            :data="actAppViewButtonTable.dataSource">
            <vxe-column width="60" align="center">
              <template #default>
                <span class="drag-btn">
                  <i class="vxe-icon-num-list"></i>
                </span>
              </template>
            </vxe-column>
            <vxe-column type="checkbox" width="50" align="center"></vxe-column>
            <vxe-column type="seq" :title="$t('m.common.label.number')" width="50" align="center"></vxe-column>
            <vxe-column field="openType" :title="$t('m.eform.appview.entity.openType')"
                        :edit-render="{name: 'select', options: openType, events: {change: changeOpenType}}"
                        :min-width="150"></vxe-column>
            <vxe-column field="buttonName" :title="$t('m.eform.appview.entity.buttonName')" :edit-render="{autofocus: '.vxe-input--inner'}" :min-width="150">
              <template #default="{ row }">
                <locale-tag v-model="row.buttonName" :group-id="groupId" :edit="false"/>
              </template>
              <template #edit="{ row }">
                <locale-tag v-model="row.buttonName" :group-id="groupId" :is-vxe="true"/>
              </template>
            </vxe-column>
            <vxe-column field="buttonType" :title="$t('m.eform.appview.entity.buttonType')"
                        :edit-render="{name: 'select', options: buttonType, events: {change: changeButtonType}}"
                        :min-width="120" align="center"></vxe-column>
            <vxe-column field="buttonStyle" :title="$t('m.eform.appview.entity.buttonStyle')"
                        :edit-render="{name: 'select', options: buttonStyle}" :min-width="120"
                        align="center"></vxe-column>
            <vxe-column field="buttonIcon" :title="$t('m.eform.appview.entity.buttonIcon')" :edit-render="{}" :min-width="140" align="center">
              <template #edit="{ row }">
                <ych-icon-select v-model="row.buttonIcon" @change="handleIcon(row, $event)" write
                                 :iconfont="false"></ych-icon-select>
              </template>
            </vxe-column>
            <vxe-column field="dialogSize" :title="$t('m.eform.appview.entity.dialogSize')"
                        :edit-render="{name: 'select', options: dialogSize}" :min-width="120"
                        align="center"></vxe-column>
            <vxe-column field="formName" :title="$t('m.eform.appview.entity.linkForm')" :edit-render="{}" :min-width="150">
              <template #default="{ row }">
                <span v-if="row.openType && noFormName.indexOf(row.openType) === -1">
                  {{ row.formName }}
                </span>
                <span v-else>{{$t('m.eform.appview.other.nothing')}}</span>
              </template>
              <template #edit="{ row }">
                <vxe-input v-model="row.formName" readOnly @click="selectForm(row)"></vxe-input>
              </template>
            </vxe-column>
            <vxe-column field="viewName" :title="$t('m.eform.appview.entity.linkView')" :edit-render="{}" :min-width="150">
              <template #default="{ row }">
                <span v-if="row.openType && noViewName.indexOf(row.openType) === -1">
                  {{ row.viewName }}
                </span>
                <span v-else>{{$t('m.eform.appview.other.nothing')}}</span>
              </template>
              <template #edit="{ row }">
                <vxe-input v-model="row.viewName" readOnly @click="selectView(row)"></vxe-input>
              </template>
            </vxe-column>
            <vxe-column field="objectName" :title="$t('m.eform.appview.entity.objectName')" :edit-render="{}" :min-width="120">
              <template #default="{ row }">
                <span v-if="row.openType && noObjectName.indexOf(row.openType) === -1">
                  {{ row.objectName }}
                </span>
                <span v-else>{{$t('m.eform.appview.other.nothing')}}</span>
              </template>
              <template #edit="{ row }">
                <vxe-input v-model="row.objectName" readOnly @click="selectObject(row)"></vxe-input>
              </template>
            </vxe-column>
            <vxe-column field="outParameter" :title="$t('m.eform.appview.entity.outParameter')" :edit-render="{}" :min-width="150" align="center">
              <template #default="{ row }">
                <a-badge :dot="!!row.outParameter" v-if="needOutParameter.indexOf(row.openType) !== -1">
                  <a-button type="link" size="small" @click="outParameterInput(row)">{{
                      $t('m.common.button.config')
                    }}
                  </a-button>
                </a-badge>
                <span v-else>{{$t('m.eform.appview.other.nothing')}}</span>
              </template>
              <template #edit="{ row }">
                <a-badge :dot="!!row.outParameter" v-if="needOutParameter.indexOf(row.openType) !== -1">
                  <a-button type="link" size="small" @click="outParameterInput(row)">{{
                      $t('m.common.button.config')
                    }}
                  </a-button>
                </a-badge>
                <span v-else>{{$t('m.eform.appview.other.nothing')}}</span>
              </template>
            </vxe-column>
            <vxe-column field="showCondition" :title="$t('m.eform.appview.entity.showCondition')" :edit-render="{}" :min-width="110" align="center">
              <template #default="{ row }">
                <a-badge :dot="!!row.showCondition">
                  <a-button type="link" size="small" @click="showConditionInput(row)">{{
                      $t('m.common.button.config')
                    }}
                  </a-button>
                </a-badge>
              </template>
              <template #edit="{ row }">
                <a-badge :dot="!!row.showCondition">
                  <a-button type="link" size="small" @click="showConditionInput(row)">{{
                      $t('m.common.button.config')
                    }}
                  </a-button>
                </a-badge>
              </template>
            </vxe-column>
            <vxe-column field="isExpand" :title="$t('m.eform.appview.entity.isExpand')" :edit-render="{}" :min-width="110" align="center">
              <template #default="{ row }">
                <vxe-checkbox v-model="row.isExpand" checked-value="Y" unchecked-value="N"
                              :disabled="row.buttonType === 'toolbar'"></vxe-checkbox>
              </template>
              <template #edit="{ row }">
                <vxe-checkbox v-model="row.isExpand" checked-value="Y" unchecked-value="N"
                              :disabled="row.buttonType === 'toolbar'"></vxe-checkbox>
              </template>
            </vxe-column>
            <vxe-column field="isPermission" :title="$t('m.eform.appview.entity.isPermission')" :edit-render="{}" :min-width="150" align="center">
              <template #default="{ row }">
                <vxe-checkbox v-model="row.isPermission" checked-value="Y" unchecked-value="N"></vxe-checkbox>
              </template>
              <template #edit="{ row }">
                <vxe-checkbox v-model="row.isPermission" checked-value="Y" unchecked-value="N"></vxe-checkbox>
              </template>
            </vxe-column>
            <vxe-column field="permission" :title="$t('m.eform.appview.entity.permission')" :edit-render="{name: 'input'}"
                        :title-help="{content: this.$t('m.eform.appview.other.permission_help')}" :min-width="150">
            </vxe-column>
            <vxe-column field="openScript" :title="$t('m.eform.appview.entity.openScript')" :edit-render="{}" :min-width="120" align="center">
              <template #default="{ row }">
                <a-badge :dot="!!row.openScript" v-if="needOpenScriptButton.indexOf(row.openType) !== -1">
                  <a-button type="link" size="small" @click="openScriptButton(row)">{{
                      $t('m.common.button.config')
                    }}
                  </a-button>
                </a-badge>
                <span v-else>{{$t('m.eform.appview.other.nothing')}}</span>
              </template>
              <template #edit="{ row }">
                <a-badge :dot="!!row.openScript" v-if="needOpenScriptButton.indexOf(row.openType) !== -1">
                  <a-button type="link" size="small" @click="openScriptButton(row)">{{
                      $t('m.common.button.config')
                    }}
                  </a-button>
                </a-badge>
                <span v-else>{{$t('m.eform.appview.other.nothing')}}</span>
              </template>
            </vxe-column>
            <vxe-column field="butScriptDetails" :title="$t('m.eform.appview.entity.butScriptDetails')" :edit-render="{}" :min-width="110" align="center">
              <template #default="{ row }">
                <a-badge
                  :dot="!!row.beforeScript || !!row.afterScript || !!row.beforeJava || !!row.afterJava || !!row.beforeGroovy || !!row.afterGroovy || !!row.customCheckFksMessage">
                  <a-button type="link" size="small" @click="butScriptDetails(row)">{{
                      $t('m.common.button.config')
                    }}
                  </a-button>
                </a-badge>
              </template>
              <template #edit="{ row }">
                <a-badge
                  :dot="!!row.beforeScript || !!row.afterScript || !!row.beforeJava || !!row.afterJava || !!row.beforeGroovy || !!row.afterGroovy || !!row.customCheckFksMessage">
                  <a-button type="link" size="small" @click="butScriptDetails(row)">{{
                      $t('m.common.button.config')
                    }}
                  </a-button>
                </a-badge>
              </template>
            </vxe-column>
          </vxe-table>

        </a-tab-pane>
        <a-tab-pane :tab="$t('m.eform.appview.other.parameter_config')" :key="refKeys[3]" :forceRender="true">

          <vxe-toolbar>
            <template #buttons>
              <a-button type="primary" icon="plus"
                        @click="insertRow('inParameterTable', inParameterConfigTable.dataSource, inParameterConfigTable.initData, 'parameterKey')">
                {{ $t('m.common.button.add') }}
              </a-button>
              <span class="action-button-gap"></span>
              <a-button type="default" icon="minus"
                        @click="deleteRow('inParameterTable', inParameterConfigTable.dataSource)">{{ $t('m.common.button.delete') }}
              </a-button>
            </template>
          </vxe-toolbar>

          <vxe-table
            header-align="center"
            border
            :scroll-y="{enabled: false}"
            ref="inParameterTable"
            class="sortable-row-vxe"
            show-header-overflow
            show-overflow
            :height="height"
            :edit-rules="inParameterConfigTable.validRules"
            :row-config="{isHover: true, useKey: true, keyField: 'id'}"
            :edit-config="{trigger: 'click', mode: 'cell'}"
            :data="inParameterConfigTable.dataSource">
            <vxe-column width="60" align="center">
              <template #default>
                <span class="drag-btn">
                  <i class="vxe-icon-num-list"></i>
                </span>
              </template>
            </vxe-column>
            <vxe-column type="checkbox" width="50" align="center"></vxe-column>
            <vxe-column type="seq" :title="$t('m.common.label.number')" width="50" align="center"></vxe-column>
            <vxe-column field="parameterKey" :title="$t('m.eform.appview.entity.parameterKey')" :edit-render="{name: 'input'}" :min-width="120"></vxe-column>
            <vxe-column field="parameterName" :title="$t('m.eform.appview.entity.parameterName')" :edit-render="{name: 'input'}" :min-width="120"></vxe-column>
            <vxe-column field="parameterType" :title="$t('m.eform.appview.entity.parameterType')"
                        :edit-render="{name: 'select', options: parameterType}" :min-width="120"
                        align="center"></vxe-column>
            <vxe-column field="isRequired" :title="$t('m.eform.appview.entity.isRequired')" :edit-render="{}" :min-width="110" align="center">
              <template #default="{ row }">
                <vxe-checkbox v-model="row.isRequired" checked-value="Y" unchecked-value="N"></vxe-checkbox>
              </template>
              <template #edit="{ row }">
                <vxe-checkbox v-model="row.isRequired" checked-value="Y" unchecked-value="N"></vxe-checkbox>
              </template>
            </vxe-column>
            <vxe-column field="defaultValue" :title="$t('m.eform.apptable.entity.colDefaultVal')"
                        :edit-render="{name: 'input'}" :min-width="120"></vxe-column>
          </vxe-table>
        </a-tab-pane>

      </a-tabs>

    </a-spin>

    <select-table-dialog ref="selectTableDialog" @selectFinished="selectTableOk"
                         :groupId="groupId"></select-table-dialog>

    <select-db-table-dialog ref="selectDbTableDialog" @selectFinished="selectDbTableOk"></select-db-table-dialog>

    <select-form-dialog ref="selectFormDialog" @selectFinished="selectFormOk" :groupId="groupId"></select-form-dialog>

    <select-view-all-dialog ref="selectViewDialog" @selectFinished="selectViewOk"
                            :groupId="groupId"></select-view-all-dialog>

    <select-object-dialog ref="selectObjectDialog" @selectFinished="selectObjectOk"
                          :groupId="groupId"></select-object-dialog>

    <data-config-dialog ref="dataConfigDialog" @selectFinished="dataConfigOk" :is-view="true"
                        :groupId="groupId"></data-config-dialog>

    <action-config-dialog ref="actionConfigDialog" @selectFinished="actionConfigOk"
                          :groupId="groupId"></action-config-dialog>

    <import-rules-dialog ref="importRulesDialog" @selectFinished="importRulesOk"
                         :groupId="groupId"></import-rules-dialog>
    <export-column-style-dialog ref="exportColumnStyleDialog" @selectFinished="exportColumnStyleOk"></export-column-style-dialog>
    <export-global-style-dialog ref="exportGlobalStyleDialog" @selectFinished="exportGlobalStyleDialogOk"></export-global-style-dialog>
    <open-script-dialog ref="openScriptDialog" @selectFinished="openScriptOk" help-code="actionOpenScriptForJs"></open-script-dialog>

    <but-script-dialog ref="butScriptDialog" @selectFinished="butScriptOk"></but-script-dialog>

    <form-show-config-dialog ref="queryFormatDialog" @selectFinished="queryFormatOk"
                             :tableColList="actAppViewColTable.dataSource"
                             :is-query="true" :groupId="groupId"></form-show-config-dialog>

    <show-condition-dialog ref="showConditionDialog" @selectFinished="showConditionOk" help-code="showConditionForJs"></show-condition-dialog>

    <out-parameter-dialog ref="outParameterDialog" @selectFinished="outParameterOk"></out-parameter-dialog>
  </ych-modal>
</template>

<script>

import {GardLayoutMixin} from '@/mixins/GardLayoutMixin'
import {postAction, getAction} from '@/api/manage'
import {EFormConstant} from '../EFormConstant'
import SelectTableDialog from '../select/dialog/SelectTableDialog'
import SelectDbTableDialog from '../select/dialog/SelectDbTableDialog'
import SelectFormDialog from '../select/dialog/SelectFormDialog'
import DataConfigDialog from './actAppView/DataConfigDialog'
import ActionConfigDialog from './actAppView/ActionConfigDialog'
import ImportRulesDialog from './actAppView/ImportRulesDialog'
import OpenScriptDialog from './actAppView/OpenScriptDialog'
import ButScriptDialog from './actAppView/ButScriptDialog'
import ShowConditionDialog from './actAppView/ShowConditionDialog'
import OutParameterDialog from './actAppView/OutParameterDialog'
import SelectDs from '../select/tag/SelectDs'
import SelectObjectDialog from '../select/dialog/SelectObjectDialog'
import SelectViewAllDialog from '../select/dialog/SelectViewAllDialog'
import FormShowConfigDialog from './actAppTable/FormShowConfigDialog'
import YchConstant from "@/api/YchConstant";
import {YchIconSelect, YchCodeEditor} from '@yuncheng/ych-components'
import {randomString} from "../../../utils/util";
import {YchVxeTableMixin} from "../../../mixins/YchVxeTableMixin";
import YchHelp from '@/components/ych/YchHelp'
import LocaleTag from "../localeProvider/tag/LocaleTag";
import LocaleUtil from "../../../utils/LocaleUtil";
import ExportColumnStyleDialog from './actAppView/ExportColumnStyleDialog'
import ExportGlobalStyleDialog from './actAppView/ExportGlobalStyleDialog'
import ScriptButton from "./designer/packages/ScriptButton";
import CustomSlotDialog from "./actAppView/CustomSlotDialog";

export default {
  name: 'ActAppViewModal',
  mixins: [YchVxeTableMixin, GardLayoutMixin],
  components: {
    SelectTableDialog,
    SelectDbTableDialog,
    SelectFormDialog,
    DataConfigDialog,
    ActionConfigDialog,
    OpenScriptDialog,
    ButScriptDialog,
    FormShowConfigDialog,
    ShowConditionDialog,
    OutParameterDialog,
    SelectDs,
    SelectObjectDialog,
    SelectViewAllDialog,
    ImportRulesDialog,
    YchIconSelect,
    YchCodeEditor,
    YchHelp,
    LocaleTag,
    ExportColumnStyleDialog,
    ExportGlobalStyleDialog,
    ScriptButton,
    CustomSlotDialog,
  },
  props: {
    groupId: {
      type: String,
      required: true
    },
  },
  data() {
    const parameterKeyValid = ({cellValue, row}) => {
      if (cellValue) {
        const uniqueRow = this.inParameterConfigTable.dataSource.find(item => item.parameterKey && item.parameterKey.toLowerCase() === cellValue.toLowerCase() && item.id !== row.id)
        if (uniqueRow) {
          return new Error(this.$t('m.eform.appview.verify.parameterKey_repeat'))
        }
      }
    }
    return {
      title: this.$t('m.eform.apptable.entity.viewModel'),
      height: document.body.clientHeight - 53 - 55 - 86 - 52,
      height2: document.body.clientHeight - 53 - 55 - 86,
      noShowConfig: [],
      needDialogSize: EFormConstant.needDialogSize,
      needOpenScriptButton: EFormConstant.needOpenScriptButton,
      needOutParameter: EFormConstant.needOutParameter,
      noFormName: EFormConstant.noFormName,
      noObjectName: EFormConstant.noObjectName,
      noViewName: EFormConstant.noViewName,
      bodyStyle: {
        paddingTop: 0
      },
      wrapperColForText: {md: 10},
      labelColForText: {md: 14},
      yesNo_text: EFormConstant.yesNo_text,
      flowScope: EFormConstant.flowScope,
      isFlow: false,
      isPage: true,
      isScroll: false,
      record: null,
      labelCol2: {
        xs: {span: 24},
        sm: {span: 12}
      },
      wrapperCol2: {
        xs: {span: 24},
        sm: {span: 12}
      },
      pageNumOptions: [{
        value: 10,
        label: 10
      }, {
        value: 20,
        label: 20
      }, {
        value: 50,
        label: 50
      }, {
        value: 100,
        label: 100
      }, {
        value: 200,
        label: 200
      }, {
        value: 500,
        label: 500
      }],
      validatorRules: {
        viewName: {
          rules: [
            {required: true, message: this.$t('m.eform.appview.verify.viewName')},
          ]
        },
        viewCode: {
          rules: [
            {required: true, message: this.$t('m.eform.appview.verify.viewCode')},
            {validator: this.checkCode}
          ]
        },
        afterScript: {},
        beforeScript: {},
        beforeJava: {},
        afterJava: {},
        beforeGroovy: {},
        afterGroovy: {},
        customRowFunc: {},
        viewSql: {},
        isQuery: {
          initialValue: 'Y'
        },
        viewOrder: {},
        dialogTitle: {},
        isFlow: {
          initialValue: 'N'
        },
        isLineNum: {
          initialValue: 'Y'
        },
        isPage: {
          initialValue: 'Y'
        },
        pageNum: {
          initialValue: 10
        },
        actionWidth: {
          initialValue: 140
        },
        scrollEnable: {
          initialValue: 'N'
        },
        scrollWidth: {
          initialValue: 1300
        },
        fixedAction: {
          initialValue: 'N'
        },
        fixedBpmColumn: {
          initialValue: 'N'
        },
        disableBpmStatus: {
          initialValue: 'N'
        },
        disableBpmActivity: {
          initialValue: 'N'
        },
        checkType: {
          initialValue: 'Y'
        },
        dsCode: {
          initialValue: 'dataSourceDefault',
          rules: [
            {required: true, message: this.$t('m.eform.appview.verify.dataSourceDefault')},
          ]
        },
        flowScope: {
          initialValue: 'my'
        },
        orderNum: {
          initialValue: 1 // TODO 默认值取数据库最大值+10
        },
        customSlot: {},
        customDataConfigSql: {}
      },
      defaultTabKey: 'actAppViewTab',
      refKeys: ['actAppViewCol', 'actAppViewQuery', 'actAppViewButton', 'inParameterConfig'],
      activeKey: 'actAppViewTab',
      colType: EFormConstant.colType,
      alignType: EFormConstant.alignType,
      fixed: EFormConstant.fixed,
      tuoMin: EFormConstant.tuoMin,
      queryOp: EFormConstant.queryOp,
      showType: EFormConstant.showType3,
      parameterType: EFormConstant.colTypeForParameter,
      openType: EFormConstant.openType,
      buttonType: EFormConstant.buttonType,
      buttonStyle: EFormConstant.buttonStyle,
      // 暂时只在列表中实现动态路由
      // 暂时只在列表中实现本页签覆盖
      dialogSize: EFormConstant.dialogSize.concat([{
        text: this.$t('m.eform.eformConstant.dialogSize.tab'),
        label: this.$t('m.eform.eformConstant.dialogSize.tab'),
        value: 'tab'
      }, {
        text: this.$t('m.eform.eformConstant.dialogSize.tabInCurrent'),
        label: this.$t('m.eform.eformConstant.dialogSize.tabInCurrent'),
        value: 'tabInCurrent'
      }]),
      // 页面列
      actAppViewColTable: {
        dataSource: [],
        validRules: {
          colCode: [
            {required: true, message: this.$t('m.eform.appview.verify.colCode')},
          ],
          colName: [
            {required: true, message: this.$t('m.eform.appview.verify.colName')},
          ],
          colType: [
            {required: true, message: this.$t('m.eform.appview.verify.colType')},
          ],
        },
        initData: {
          colCode: '',
          colName: '',
          colAlias: '',
          mergeHeaderName: '',
          queryAlias: '',
          colType: 'varchar',
          alignType: 'center',
          colWidth: null,
          isHidden: 'N',
          isExport: 'Y',
          exportStyle: '',
          isEllipsis: 'N',
          fixed: 'none',
          isImport: 'Y',
          tuoMin: 'none',
          orderNum: 0,
          showType: 'input',
          dataConfig: '',
          actionConfig: '',
          importRules: '',
          isSort:'N',
          queryFormat: '',
          isQuery: 'N',
          queryIsHidden: 'N',
          queryOp: 'eq',
          queryDefaultValue: '',
          queryOrder: null,
          queryCustomSql: ''
        }
      },
      // 页面按钮
      actAppViewButtonTable: {
        dataSource: [],
        validRules: {
          openType: [
            {required: true, message: this.$t('m.eform.appview.verify.openType')},
          ],
          buttonName: [
            {required: true, message: this.$t('m.eform.appview.verify.buttonName')},
          ],
        },
        initData: {
          openType: 'handleAdd',
          buttonName: 'm.common.button.add',
          buttonType: 'toolbar',
          buttonStyle: 'default',
          buttonIcon: 'plus',
          dialogSize: 'default',
          openConfig: 'dialog',
          formCode: '',
          formName: '',
          viewCode: '',
          viewName: '',
          objectCode: '',
          objectName: '',
          outParameter: '',
          showCondition: '',
          isExpand: 'N',
          isPermission: 'N',
          permission: '',
          openScript: '',
          beforeScript: '',
          afterScript: '',
          beforeJava: '',
          afterJava: '',
          beforeGroovy: '',
          afterGroovy: '',
          customCheckFksMessage: '',
          butScriptDetails: '',
          orderNum: 0,
        }
      },
      // 入参配置
      inParameterConfigTable: {
        dataSource: [],
        validRules: {
          parameterKey: [
            {required: true, message: this.$t('m.eform.appview.verify.parameterKey')},
            {validator: parameterKeyValid},
          ],
          parameterName: [
            {required: true, message: this.$t('m.eform.appview.verify.parameterName')},
          ],
          parameterType: [
            {required: true, message: this.$t('m.eform.appview.verify.parameterType')},
          ],
        },
        initData: {
          parameterKey: '',
          parameterName: '',
          parameterType: 'varchar',
          isRequired: 'N',
          defaultValue: ''
        }
      },
      url: {
        add: YchConstant.PREFIX_EFORM + '/manage/actAppView/add',
        edit: YchConstant.PREFIX_EFORM + '/manage/actAppView/edit',
        checkCode: YchConstant.PREFIX_EFORM + '/manage/actAppView/checkCode',
        actAppViewCol: {
          list: YchConstant.PREFIX_EFORM + '/manage/actAppView/queryActAppViewColByMainId'
        },
        actAppViewButton: {
          list: YchConstant.PREFIX_EFORM + '/manage/actAppView/queryActAppViewButtonByMainId'
        },
        parseSql: YchConstant.PREFIX_EFORM + '/engine/viewEngine/parseSql',
        getSelectSqlByTable: YchConstant.PREFIX_EFORM + '/engine/viewEngine/getSelectSqlByTable'
      }
    }
  },
  methods: {
    parseSql() {
      const sql = this.form.getFieldValue('viewSql')
      if (!sql) {
        this.messageUtil.warning(this.$t('m.common.tip.sql_warn'))
        return
      }
      const dsCode = this.form.getFieldValue('dsCode')
      this.spinning++
      postAction(this.url.parseSql + '?dsCode=' + dsCode, {
        sql: sql
      }).then((res) => {
        if (res.success) {
          this.initTable(res.result)
        } else {
          this.messageUtil.warning(res.message)
        }
      }).finally(() => {
        this.spinning--
      })
    },
    initTable(tables) {
      if (!tables) {
        this.messageUtil.warning(this.$t('m.common.tip.return_data_null'))
        return
      }
      let hasId = false
      let tableName = []
      tables.forEach(table => {
        table.columns.forEach(column => {
          if (column.colAlias === 'id') {
            hasId = true
          }
        })
        tableName.push(table.tableName)
      })
      if (!hasId) {
        this.messageUtil.warning(this.$t('m.eform.appview.verify.sql_parse'))
        return
      }
      const dataSource = []
      tables.forEach(table => {
        this.initColumn(table.columns, dataSource, table.tableName)
      })
      this.actAppViewColTable.dataSource = [...dataSource]
      this.messageUtil.success(this.$t('m.common.tip.sql_ok'))
      this.model.tableName = tableName.length > 0 ? tableName[0] : ''
    },
    resetOrderNum(dataSource) {
      let orderNum = 1
      if (dataSource) {
        dataSource.forEach(item => {
          item.orderNum = orderNum++
        })
      }
    },
    initColumn(columns, dataSource, tableName) {
      let orderNum = 1
      //先按当前顺序设置orderNum值
      this.resetOrderNum(this.actAppViewColTable.dataSource)
      columns.forEach(column => {
        let data = this.actAppViewColTable.dataSource.find(vo => vo.colCode === column.colAlias)
        if (data) {
          data.colName = LocaleUtil.getTableColCode(tableName, column.colAlias, column.colDesc)
          data.colType = column.colType
          data.isExport = (!data.isExport || data.isExport === 'N') ? 'N' : 'Y'
          data.isEllipsis = (!data.isEllipsis || data.isEllipsis === 'N') ? 'N' : 'Y'
          data.isImport = (!data.isImport || data.isImport === 'N') ? 'N' : 'Y'
          data.isHidden = (!data.isHidden || data.isHidden === 'Y') ? 'Y' : 'N'
          data.isSort = (!data.isSort || data.isSort === 'N') ? 'N' : 'Y'
          data.isQuery = (!data.isQuery || data.isQuery === 'N') ? 'N' : 'Y'
          data.queryIsHidden = (!data.queryIsHidden || data.queryIsHidden === 'Y') ? 'Y' : 'N'
        } else {
          const isDefault = EFormConstant.defaultField.indexOf(column.colAlias) !== -1

          let id = randomString(32)
          data = {
            id: id,
            colCode: column.colAlias,
            colName: LocaleUtil.getTableColCode(tableName, column.colAlias, column.colDesc),
            colAlias: '',
            mergeHeaderName: '',
            queryAlias: '',
            colType: column.colType,
            alignType: 'center',
            isExport: 'Y',
            exportStyle: null,
            isEllipsis: 'N',
            fixed: 'none',
            isImport: 'Y',
            isHidden: isDefault ? 'Y' : 'N',
            tuoMin: 'none',
            showType: column.showType || 'input',
            dataConfig: column.dataConfig,
            actionConfig: null,
            importRules: null,
            isSort: 'N',
            queryFormat: column.showConfig,
            orderNum: orderNum,
            isQuery: 'N',
            queryIsHidden: 'N',
            queryOp: 'eq'
          }
          if (data.showType === 'textarea' || data.showType === 'serialno' || data.showType === 'editor' || data.showType === 'icon' || data.showType === 'hidden') {
            data.showType = 'input'
          } else if (data.showType === 'rate' || data.showType === 'slider') {
            data.showType = 'number'
          } else if (data.showType === 'checkbox' || data.showType === 'radio') {
            data.showType = 'select'
          } else if (data.showType === 'uploadFile' || data.showType === 'uploadImg') {
            data.showType = 'input'
          }
        }
        dataSource.push(data)
        orderNum++
      })
      //按orderNum值重新排序
      dataSource.sort(function (a, b) {
        return a.orderNum < b.orderNum ? -1 : 1;
      });

    },
    selectTable() {
      const dsCode = this.form.getFieldValue('dsCode')
      this.$refs.selectTableDialog.dsCode = dsCode
      this.$refs.selectTableDialog.radio = true
      this.$refs.selectTableDialog.visible = true
    },
    selectTableOk(selectedRowKeys, selectionRows) {
      this.spinning++
      const dsCode = selectionRows[0].dsCode
      this.form.setFieldsValue({dsCode: dsCode})
      getAction(this.url.getSelectSqlByTable, {
        tableName: selectionRows[0].tableName
      }).then((res) => {
        if (res.success) {
          this.form.setFieldsValue({viewSql: res.result})
        } else {
          this.messageUtil.warning(res.message)
        }
      }).finally(() => {
        this.spinning--
      })
    },
    selectDbTable() {
      const dsCode = this.form.getFieldValue('dsCode')
      this.$refs.selectDbTableDialog.queryParam.dsCode = dsCode
      this.$refs.selectDbTableDialog.radio = true
      this.$refs.selectDbTableDialog.visible = true
    },
    selectDbTableOk(selectedRowKeys, selectionRows) {
      const dsCode = selectionRows[0].dsCode
      const sql = 'select * from ' + selectionRows[0].tableName
      this.form.setFieldsValue({dsCode: dsCode, viewSql: sql})
    },
    selectObject(record) {
      this.record = record
      this.$refs.selectObjectDialog.radio = true
      this.$refs.selectObjectDialog.visible = true
    },
    selectObjectOk(selectedRowKeys, selectionRows) {
      const objectName = selectionRows ? selectionRows[0].objName : null
      const objectCode = selectionRows ? selectionRows[0].objCode : null

      this.record.objectName = objectName
      this.record.objectCode = objectCode

      this.$refs.buttonTable.updateData()
    },
    selectForm(record) {
      this.record = record
      this.$refs.selectFormDialog.radio = true
      this.$refs.selectFormDialog.visible = true
    },
    selectFormOk(selectedRowKeys, selectionRows) {
      const formName = selectionRows ? selectionRows[0].formName : null
      const formCode = selectionRows ? selectionRows[0].formCode : null

      this.record.formName = formName
      this.record.formCode = formCode

      this.$refs.buttonTable.updateData()
    },
    selectView(record) {
      this.record = record
      this.$refs.selectViewDialog.radio = true
      this.$refs.selectViewDialog.visible = true
    },
    selectViewOk(selectedRowKeys, selectionRows) {
      const viewName = selectionRows ? selectionRows[0].viewName : null
      const viewCode = selectionRows ? selectionRows[0].viewCode : null

      this.record.viewName = viewName
      this.record.viewCode = viewCode

      this.$refs.buttonTable.updateData()
    },
    createDefaultBut(item, buttonStyle, isExpand) {
      let id = randomString(32)
      const defaultBut = {
        id: id,
        openType: item.value,
        buttonName: item.showText || item.text,
        buttonType: item.buttonType,
        buttonStyle: buttonStyle,
        buttonIcon: item.buttonIcon,
        openConfig: 'dialog',
        dialogSize: 'default',
        isPermission: 'N',
        isExpand: isExpand,
        orderNum: 0,
      }
      return defaultBut
    },
    addBefore() {
      const that = this
      this.$nextTick(() => {
        setTimeout(function () {
          const addItem = EFormConstant.openType.find(vo => vo.value === 'handleAdd')
          const editItem = EFormConstant.openType.find(vo => vo.value === 'handleEdit')
          const delItem = EFormConstant.openType.find(vo => vo.value === 'handleDel')
          const batchDelItem = EFormConstant.openType.find(vo => vo.value === 'handleBatchDel')

          const addBut = that.createDefaultBut(addItem, 'primary', 'N')
          const editBut = that.createDefaultBut(editItem, 'default', 'Y')
          const delBut = that.createDefaultBut(delItem, 'default', 'N')
          const batchDelBut = that.createDefaultBut(batchDelItem, 'default', 'N')
          that.actAppViewButtonTable.dataSource = [addBut, editBut, delBut, batchDelBut]
        }, 500)
      })
    },
    editAfter() {
      // 启用排序功能
      this.rowDrop('colTable', (newIndex, oldIndex) => {
        this.afterRowDrop(newIndex, oldIndex, this.actAppViewColTable.dataSource);
      })
      this.rowDrop('buttonTable', (newIndex, oldIndex) => {
        this.afterRowDrop(newIndex, oldIndex, this.actAppViewButtonTable.dataSource);
      })
      this.rowDrop('inParameterTable', (newIndex, oldIndex) => {
        this.afterRowDrop(newIndex, oldIndex, this.inParameterConfigTable.dataSource);
      })

      this.activeKey = this.defaultTabKey

      this.isFlow = this.model.isFlow === 'Y'
      this.isPage = this.model.isPage !== 'N'
      this.isScroll = this.model.scrollEnable === 'Y'

      // 多语言
      this.model.viewName = this.model.viewNameLocaleCode

      let fieldVal = this.lodash.pick(this.model, 'viewName', 'viewCode', 'isQuery', 'isLineNum', 'isPage', 'pageNum', 'scrollEnable', 'actionWidth', 'scrollWidth', 'fixedAction', 'fixedBpmColumn', 'disableBpmStatus', 'disableBpmActivity', 'checkType', 'dsCode', 'isFlow', 'flowScope', 'viewSql', 'beforeScript', 'afterScript', 'beforeJava', 'afterJava', 'beforeGroovy', 'afterGroovy', 'customRowFunc', 'viewOrder', 'dialogTitle', 'orderNum', 'customSlot', 'customDataConfigSql')
      if (this.model.inParameter) {
        this.inParameterConfigTable.dataSource = JSON.parse(this.model.inParameter)
      } else {
        this.inParameterConfigTable.dataSource = []
      }
      this.$nextTick(() => {
        this.form.setFieldsValue(fieldVal)
      })
      // 加载子表数据
      if (this.model.id) {
        let params = {id: this.model.id}
        this.spinning++
        getAction(this.url.actAppViewCol.list, params).then(res => {
          let {result} = res
          this.actAppViewColTable.dataSource = result || []
        }).finally(() => {
          this.spinning--
        })
        this.spinning++
        getAction(this.url.actAppViewButton.list, params).then(res => {
          let {result} = res
          this.actAppViewButtonTable.dataSource = result || []
        }).finally(() => {
          this.spinning--
        })
      }
    },
    async beforeSave(formData) {
      formData.groupId = this.groupId
      formData.viewType = 'table'
      const tableData1 = await this.getTableDataSource(this.$refs.colTable, this.actAppViewColTable.dataSource);
      if (tableData1 === false) {
        // 返回空，终止保存动作
        this.activeKey = this.refKeys[0]
        return
      }
      const tableData2 = await this.getTableDataSource(this.$refs.buttonTable, this.actAppViewButtonTable.dataSource);
      if (tableData2 === false) {
        // 返回空，终止保存动作
        this.activeKey = this.refKeys[2]
        return
      }
      const tableData3 = await this.getTableDataSource(this.$refs.inParameterTable, this.inParameterConfigTable.dataSource);
      if (tableData3 === false) {
        // 返回空，终止保存动作
        this.activeKey = this.refKeys[3]
        return
      }
      this.resetOrderNum(this.actAppViewColTable.dataSource)
      this.resetOrderNum(this.actAppViewButtonTable.dataSource)
      formData.inParameter = JSON.stringify(this.inParameterConfigTable.dataSource)
      formData.actAppViewColList = this.actAppViewColTable.dataSource
      formData.actAppViewButtonList = this.actAppViewButtonTable.dataSource
      return formData;
    },
    openScriptButton(record) {
      this.record = record
      this.$refs.openScriptDialog.open(record.openScript, record)
    },
    openScriptOk(json) {
      this.record.openScript = json
    },
    dataConfigButton(record) {
      this.record = record
      const sql = this.form.getFieldValue('viewSql')
      const dsCode = this.form.getFieldValue('dsCode')
      this.$refs.dataConfigDialog.open(record.dataConfig, record, sql, dsCode)
    },
    dataConfigOk(dataConfig) {
      this.record.dataConfig = dataConfig
    },
    actionConfigButton(record) {
      this.record = record
      this.$refs.actionConfigDialog.open(record.actionConfig, record)
    },
    actionConfigOk(actionConfig) {
      this.record.actionConfig = actionConfig
    },
    importRulesButton(record) {
      this.record = record
      this.$refs.importRulesDialog.open(record.importRules, record)
    },
    importRulesOk(importRules) {
      this.record.importRules = importRules
    },
    exportColumnStyleButton(record) {
      this.record = record
      this.$refs.exportColumnStyleDialog.open(record.exportStyle, record)
    },
    exportColumnStyleOk(exportStyle) {
      this.record.exportStyle = exportStyle
    },
    exportGlobalStyleButton(){
      this.$refs.exportGlobalStyleDialog.open(this.model.exportGlobalStyle)
    },
    exportGlobalStyleDialogOk(exportGlobalStyle) {
      this.model.exportGlobalStyle = exportGlobalStyle
    },
    showConditionInput(record) {
      this.record = record
      this.$refs.showConditionDialog.open(record.showCondition, record)
    },
    showConditionOk(json) {
      this.record.showCondition = json
    },
    outParameterInput(record) {
      this.record = record
      if (!record.viewCode) {
        this.messageUtil.warning(this.$t('m.eform.appview.verify.link_page'))
        return
      }
      this.$refs.outParameterDialog.open(record.outParameter, record.viewCode)
    },
    outParameterOk(json) {
      this.record.outParameter = json
    },
    queryFormatButton(record) {
      this.record = record
      const sql = this.form.getFieldValue('viewSql')
      const dsCode = this.form.getFieldValue('dsCode')
      this.$refs.queryFormatDialog.open(record.queryFormat, record, sql, dsCode)
    },
    queryFormatOk(json) {
      this.record['queryFormat'] = json
    },
    butScriptDetails(record) {
      this.record = record
      this.$refs.butScriptDialog.open(record)
    },
    butScriptOk(model) {
      this.record.beforeScript = model.beforeScript
      this.record.afterScript = model.afterScript
      this.record.beforeJava = model.beforeJava
      this.record.afterJava = model.afterJava
      this.record.beforeGroovy = model.beforeGroovy
      this.record.afterGroovy = model.afterGroovy
      this.record.customCheckFksMessage = model.customCheckFksMessage
    },
    handleIcon(record, value) {
      record.buttonIcon = value
    },
    checkCode(rule, value, callback) {
      if (!value) {
        callback()
        return
      }
      let reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");
      if (reg.test(value)) {
        callback(this.$t('m.eform.appview.verify.viewCode_format'))
        return
      }
      getAction(this.url.checkCode, {
        value: value,
        id: this.model.id
      }).then((res) => {
        res.success ? callback() : callback(res.message)
      })
    },
    changeIsFlow(e) {
      this.isFlow = e.target.value === 'Y'
    },
    changeIsPage(e) {
      this.isPage = e.target.value === 'Y'
    },
    changeIsScroll(e) {
      this.isScroll = e.target.value === 'Y'
    },
    activeRowMethodCol({row, column}) {
      if (column.property === "fixed" && (row.isEllipsis === 'Y' || !this.isScroll)) {
        this.$refs.colTable.clearActived()
        return false
      }
      if (column.property === "isEllipsis" && (row.fixed && row.fixed !== 'none' && this.isScroll)) {
        this.$refs.colTable.clearActived()
        return false
      }
      if (column.property === "queryCustomSql" && (row.queryOp !== 'custom')) {
        this.$refs.queryTable.clearActived()
        return false
      }
      return true
    },
    changeIsEllipsis(row, {checked}) {
      if (checked) {
        row["fixed"] = 'none'
      }
    },
    changeQueryOp({row}) {
      if (row.queryOp !== 'custom') {
        row["queryCustomSql"] = ''
      }
    },
    activeRowMethodButton({row, column}) {
      if (column.property === "dialogSize" && (!row.openType || this.needDialogSize.indexOf(row.openType) === -1)) {
        this.$refs.buttonTable.clearActived()
        return false
      }
      if (column.property === "formName" && (!row.openType || this.noFormName.indexOf(row.openType) !== -1)) {
        this.$refs.buttonTable.clearActived()
        return false
      }
      if (column.property === "viewName" && (!row.openType || this.noViewName.indexOf(row.openType) !== -1)) {
        this.$refs.buttonTable.clearActived()
        return false
      }
      if (column.property === "objectName" && (!row.openType || this.noObjectName.indexOf(row.openType) !== -1)) {
        this.$refs.buttonTable.clearActived()
        return false
      }
      return true
    },
    changeOpenType({row}) {
      const item = EFormConstant.openType.find(vo => vo.value === row.openType)
      row.buttonName = item.showText || item.text
      row.buttonIcon = item.buttonIcon
      row.buttonType = item.buttonType
      this.updateButtonType(item.buttonType, row)
      if (this.needDialogSize.indexOf(row.openType) === -1) {
        row.dialogSize = 'default'
      }
    },
    changeButtonType({row}) {
      this.updateButtonType(row.buttonType, row)
    },
    updateButtonType(buttonType, row) {
      if (buttonType === 'toolbar') {
        row.isExpand = 'N'
      }
    },
    afterClose() {
      this.actAppViewColTable.dataSource = []
      this.actAppViewButtonTable.dataSource = []
    },
  }
}
</script>

<style lang="less" scoped>
</style>
